<template>
  <div class="contract-signing">
    <div class="header">
      <router-link to="/main/renshi/zhaoping/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>签约合同</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待签约" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="职位" width="150"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="formalDate" label="转正日期" width="180"></el-table-column>
            <el-table-column prop="contractType" label="合同类型" width="120"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleContract(scope.row)">签约</el-button>
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已签约" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="职位" width="150"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="contractNo" label="合同编号" width="180"></el-table-column>
            <el-table-column prop="signDate" label="签约日期" width="180"></el-table-column>
            <el-table-column prop="contractPeriod" label="合同期限" width="180">
              <template slot-scope="scope">
                {{ formatDateRange(scope.row.contractPeriod) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 签约对话框 -->
    <el-dialog title="劳动合同签约" :visible.sync="contractDialogVisible" width="60%">
      <el-form :model="contractForm" label-width="120px" v-if="currentEmployee">
        <el-form-item label="基本信息">
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="姓名">{{ currentEmployee.name }}</el-descriptions-item>
            <el-descriptions-item label="职位">{{ currentEmployee.position }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ currentEmployee.department }}</el-descriptions-item>
            <el-descriptions-item label="转正日期">{{ currentEmployee.formalDate }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>

        <el-form-item label="合同编号">
          <el-input v-model="contractForm.contractNo" placeholder="请输入合同编号"></el-input>
        </el-form-item>

        <el-form-item label="合同类型">
          <el-select v-model="contractForm.contractType">
            <el-option label="固定期限" value="固定期限"></el-option>
            <el-option label="无固定期限" value="无固定期限"></el-option>
            <el-option label="项目期限" value="项目期限"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="合同期限">
          <el-date-picker
            v-model="contractForm.contractPeriod"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="试用期">
          <el-input-number v-model="contractForm.probationMonths" :min="0" :max="6"></el-input-number>
          <span class="unit">个月</span>
        </el-form-item>

        <el-form-item label="工作地点">
          <el-input v-model="contractForm.workLocation"></el-input>
        </el-form-item>

        <el-form-item label="薪资待遇">
          <el-input-number v-model="contractForm.salary" :min="0" :step="1000"></el-input-number>
          <span class="unit">元/月</span>
        </el-form-item>

        <el-form-item label="保密协议">
          <el-switch v-model="contractForm.hasNDA"></el-switch>
        </el-form-item>

        <el-form-item label="竞业限制">
          <el-switch v-model="contractForm.hasNonCompete"></el-switch>
        </el-form-item>

        <el-form-item label="特殊约定">
          <el-input type="textarea" v-model="contractForm.specialTerms" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="contractDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitContract">确认签约</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="合同详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="contract-detail" v-if="currentEmployee">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="姓名">{{ currentEmployee.name }}</el-descriptions-item>
          <el-descriptions-item label="职位">{{ currentEmployee.position }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ currentEmployee.department }}</el-descriptions-item>
          <el-descriptions-item label="合同编号">{{ currentEmployee.contractNo }}</el-descriptions-item>
          <el-descriptions-item label="合同类型">{{ currentEmployee.contractType }}</el-descriptions-item>
          <el-descriptions-item label="签约日期">{{ currentEmployee.signDate }}</el-descriptions-item>
          <el-descriptions-item label="合同期限">
            {{ formatDateRange(currentEmployee.contractPeriod) }}
          </el-descriptions-item>
          <el-descriptions-item label="试用期">{{ currentEmployee.probationMonths }}个月</el-descriptions-item>
          <el-descriptions-item label="工作地点">{{ currentEmployee.workLocation }}</el-descriptions-item>
          <el-descriptions-item label="薪资待遇">{{ currentEmployee.salary }}元/月</el-descriptions-item>
        </el-descriptions>

        <div class="contract-terms">
          <h4>合同条款</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="保密协议">
              {{ currentEmployee.hasNDA ? '是' : '否' }}
            </el-descriptions-item>
            <el-descriptions-item label="竞业限制">
              {{ currentEmployee.hasNonCompete ? '是' : '否' }}
            </el-descriptions-item>
          </el-descriptions>
          
          <div class="special-terms" v-if="currentEmployee.specialTerms">
            <h4>特殊约定</h4>
            <p>{{ currentEmployee.specialTerms }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          id: 1,
          name: '张三',
          position: '前端开发工程师',
          department: '技术部',
          formalDate: '2024-03-15',
          contractType: '固定期限'
        }
      ],
      completedList: [
        {
          id: 2,
          name: '李四',
          position: '后端开发工程师',
          department: '技术部',
          contractNo: 'HT202403001',
          signDate: '2024-03-16',
          contractType: '固定期限',
          contractPeriod: ['2024-03-16', '2027-03-15'],
          probationMonths: 3,
          workLocation: '深圳市南山区',
          salary: 15000,
          hasNDA: true,
          hasNonCompete: true,
          specialTerms: '1. 每年享有15天带薪年假\n2. 提供租房补贴'
        }
      ],
      contractDialogVisible: false,
      detailDialogVisible: false,
      currentEmployee: null,
      contractForm: {
        contractNo: '',
        contractType: '固定期限',
        contractPeriod: [],
        probationMonths: 3,
        workLocation: '',
        salary: 0,
        hasNDA: true,
        hasNonCompete: false,
        specialTerms: ''
      }
    }
  },
  methods: {
    handleContract(row) {
      this.currentEmployee = row
      this.contractForm = {
        contractNo: this.generateContractNo(),
        contractType: '固定期限',
        contractPeriod: [],
        probationMonths: 3,
        workLocation: '',
        salary: 0,
        hasNDA: true,
        hasNonCompete: false,
        specialTerms: ''
      }
      this.contractDialogVisible = true
    },
    viewDetail(row) {
      this.currentEmployee = row
      this.detailDialogVisible = true
    },
    generateContractNo() {
      const date = new Date()
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const sequence = String(Math.floor(Math.random() * 1000)).padStart(3, '0')
      return `HT${year}${month}${sequence}`
    },
    submitContract() {
      if (!this.contractForm.contractNo || !this.contractForm.contractPeriod.length) {
        this.$message.error('请填写完整信息')
        return
      }

      // TODO: 提交合同信息到后端
      this.currentEmployee = {
        ...this.currentEmployee,
        ...this.contractForm,
        signDate: this.formatDate(new Date())
      }

      // 从待签约列表移动到已签约列表
      const index = this.pendingList.findIndex(item => item.id === this.currentEmployee.id)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentEmployee)
      }

      this.$message.success('合同签约成功')
      this.contractDialogVisible = false
    },
    formatDate(date) {
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    },
    formatDateRange(range) {
      if (!range || !range.length) return ''
      return `${this.formatDate(range[0])} 至 ${this.formatDate(range[1])}`
    }
  }
}
</script>

<style lang="scss" scoped>
.contract-signing {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }

  .contract-terms {
    margin-top: 20px;

    h4 {
      margin: 15px 0 10px;
      color: #303133;
    }
  }

  .special-terms {
    margin-top: 20px;

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
      white-space: pre-line;
    }
  }
}
</style> 